<template>
  <div id="app">
    <div id="content" contenteditable="true" @paste="handlePaste">
      <!-- 可编辑的区域 -->
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const handlePaste = (event) => {
      // 阻止默认粘贴行为，以便进行自定义处理
      event.preventDefault();

      // 获取剪贴板数据
      const clipboardData = event.clipboardData || window.clipboardData;

      // 处理剪贴板数据
      processClipboardData(clipboardData);
    };

    const processClipboardData = (clipboardData) => {
      // 如果存在HTML数据，则尝试处理
      if (clipboardData && clipboardData.types.indexOf("text/html") !== -1) {
        const pastedHTML = clipboardData.getData("text/html");
        insertHTML(pastedHTML);
      } else {
        // 如果没有HTML数据，回退到纯文本处理
        const pastedText = clipboardData.getData("text/plain");
        insertPlainText(pastedText);
      }
    };

    const insertHTML = (html) => {
      // 在内容区域插入HTML
      const contentDiv = document.getElementById("content");
      contentDiv.innerHTML = html;
    };

    const insertPlainText = (text) => {
      // 在内容区域插入纯文本
      const contentDiv = document.getElementById("content");
      contentDiv.innerText = text;
    };

    return {
      handlePaste
    };
  }
};
</script>

<style>
#content {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}
</style>
